<template>
    <div >

    </div>
    <div>
        <div class="demo-pagination-block">
            <div class="demonstration">All combined</div>
            <el-pagination
            v-model:currentPage="currentPage4"
            v-model:page-size="pageSize4"
            :page-sizes="[100, 200, 300, 400]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            />
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                
            };
        },
        methods:{
            handleSizeChange:(val) => {
                console.log(`${val} items per page`)
            },
            handleCurrentChange:(val) => {
                console.log(`current page: ${val}`)
            }
        }
    }
</script>

<style scoped> 

</style>

